﻿<template>
  <div>
<!--    <pageHead headText="订单列表" />-->
    <div class="order-list">
      <ul v-for="order in orders" :key="order.id">
        <li v-if="order.orderDetails&&order.orderDetails.length" @click="onOrderDetail(order.saleOrderNo)">
          <p class="order-no">订单号:{{ order.saleOrderNo }}</p>
          <hr>
          <div class="order-info" v-for="orderDetil in order?.orderDetails" :key="orderDetil.id">
            <img :src="orderDetil.productPhotoUrl" alt="">
            <p class="order-name">{{ orderDetil.productName }}</p>

          </div>
          <p class="order-price">
            <span>共{{ getTotalItems(order.orderDetails) }}件产品</span>
            <b>总金额：&yen;{{ getTotalPrice(order.orderDetails) }}</b>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {getOrders} from "@/HttpRequests/OrderList";
import router from "@/router";

export default {
  setup(){
    const orderListInfo = reactive({
      orders:[],
      onOrderDetail:async (orderNo)=>{
        localStorage['orderNo'] = orderNo
        router.push('/orderDetail')
      }
})
    const getTotalItems = (details) => {
      return details.reduce((total, item) => total + item.orderNum, 0);
    };

    // 计算订单总金额
    const getTotalPrice = (details) => {
      return details.reduce((total, item) => total + (item.salePrice * item.orderNum), 0);
    };

    onMounted(async ()=>{
      orderListInfo.orders = await getOrders()
    })
    return{...toRefs(orderListInfo),getTotalItems,getTotalPrice}
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  ul {
    li {
      list-style: none;
      background-color: #fff;
      margin-top: 10px;
      padding: 10px;

      .order-no {
        border-left: 3px solid crimson;
        padding-left: 6px;
        font-size: 13px;
      }

      hr {
        color: #ddd;
        margin: 10px 0;
      }

      .order-info {
        height: 68px;
        position: relative;
        padding: 6px 0 ;
        img {
          margin-right: 10px;
          float: left;
          width: 66px;
          height: 66px;
          background-color: #ccc;
        }

        .order-name {
          float: left;
          font-size: 13px;
          font-weight: bold;
          color: #666;
          height: 45px;
        }

      }

      .order-price {
        span {
          font-size: 13px;
          color: #666;
        }

        b {
          color: crimson;
          font-size: 14px;
          float: right;
        }
      }
    }
  }
}
</style>
